<!--
 * @Author: sunli
 * @Date: 2021-12-27 23:02:43
 * @LastEditTime: 2022-06-29 10:54:25
 * @LastEditors: sunli sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/popup/demo.vue
-->
<script setup>
import {Popup} from '../../../packages/lib/index';
import {ref} from 'vue'

const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
const visible5 = ref(false)
const visible6 = ref(false)
const position = ref('bottom')
const showMask = ref(true)
const title = ref('')

const bottom = () => {
  visible1.value = true
  position.value = 'bottom'
  title.value = '标题'
}
const top = () => {
  visible2.value = true
  position.value = 'top'
  title.value = ''
}
const left = () => {
  visible3.value = true
  position.value = 'left'
  title.value = ''
}
const right = () => {
  visible4.value = true
  position.value = 'right'
  title.value = ''
}

const close = () => {
  visible5.value = true
}

const round = () => {
  visible6.value = true
}
</script>

<template>
  <div>
    <button @click="bottom">default</button>
    <button @click="top">top</button>
    <button @click="left">left</button>
    <button @click="right">right</button>
    <button @click="close">close</button>
    <button @click="round">round</button>
    <Popup v-model:show="visible1" :style="{ height: '30%' }">
      <div>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Popup>
    <Popup v-model:show="visible2" :position="position" :showMask="showMask">
      <div class="top" >
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Popup>
    <Popup v-model:show="visible3" :position="position" :showMask="showMask">
      <div class="left" >
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Popup>
    <Popup v-model:show="visible4" :position="position" :showMask="showMask">
      <div class="right" style="width:200px">
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Popup>
    <Popup v-model:show="visible5">
      <div class="title">
        <span></span>
        <span>标题</span>
        <span @click="visible5 = false">x</span>
      </div>
      <div class="wrap">
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Popup>
    <Popup v-model:show="visible6" round>
      <div class="title">
        <span></span>
        <span>标题</span>
        <span @click="visible6 = false">x</span>
      </div>
      <div class="wrap">
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
        <h1>1111</h1>
      </div>
    </Popup>
  </div>
</template>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}
.wrap {
  height: 100px;
  overflow: auto;
}
</style>
